<template>
    <div >
        <div class="top">
                <img src="static/pic/logo.png" alt="" @click="back">
            <span class="name">{{name}}</span>
            <span class="fa fa-star-o" @click="shoucang" v-if="show"></span>
            <span class="fa fa-star" v-else @click="cannelsc"></span>
        </div>
        
        <div class="main" ref="info"  >
            <Swiper  
                :list="housepic"
                auto
                loop
            ></Swiper>
            <div class="msg">
                <span>朗诗玲珑屿精装三房科技住宅 </span>
                <span> 户型好</span>
                <span>地铁 </span>
                <span>学区</span>
            </div>

            <!--房子信息-->
            <div class="housemsg">
                <div class="houseinfo">
                    <div class="houseinfo-inner">房源详情</div>
                    <div>
                        <p>
                            <span class="txt">售价：</span>
                            <span class="money">{{price}}</span>
                        </p>
                        <p>
                            <span class="txt">面积：</span>
                            <span class="mianji">{{mianji}}</span>
                        </p>
                        <p>
                            <span class="txt">区属:</span>
                            <span class="txt">{{address}}</span>
                        </p>
                        <p>
                            <span class="txt">税制：</span>
                            <span class="txt">{{shuifei}}</span>
                        </p>
                    </div>
                </div>
            </div>


             <div>
                 <div class="jydz">具体地址</div>
                 <Mappic class="map"></Mappic>
             </div>

             <div>
                 <div class="jydz">周边配套</div>
                 <div class="zbjsm">
                     <div>
                         餐饮：小区底商餐饮、江畔明珠广场餐饮、明发美食广场、肯德基、麦当劳、昌海大酒店、昌海精菜馆、威尼斯假日酒店向阳渔港高新店 
                     </div>
                     <div>
                         金融：徽商银行、中国建设银行、中国农业银行、中国工商银行、紫金县农村商业银行、中国民生银行、信用社、中国邮政储蓄 
                     </div>
                    <div>
                            医院：昌海卫生所、鼓楼医院分院、长海门诊、泰山医院、浦口医院
                        超市：华润苏果、昌海超市、家兴生活超市、好又多、华联超市、为民平价超市、购好便利、爱家水果炒货超市 
                    </div>
                    <div>
                        学校：开心幼儿园、南京一中明发江湾分校、琅琊路小学明发滨江分校、力学小学海德北岸分校、柳袱小学、双诚双语幼儿园、妈咪爱幼儿园、智多星幼儿园、南京市实验幼儿园明发滨江分校、浦口区培尔幼儿园、小天使双语幼儿园、十七中学
                    </div>
                    <div>
                         药店：益丰大药房、南京泰达药店、先声再康药店 
                    </div>
                    <div>
                        休闲：江畔明珠广场、明发外滩广场、弘阳广场 卖场：华东MALL、太洋百货、弘阳广场、金盛百货 公园广场：江畔明珠广场、明发外滩广场、明发美食广场、弘阳广场紧邻江畔明珠广场、明发外滩广场、弘阳广场，商圈丰富，生活便利。 免责申明：本站学区资料来源于政府最新学区规划，仅供网友参考。具体以南京市教育局最终公布资料为准！
                    </div>
                 </div>
             </div>

             <!--售楼电话-->
             <div class="font">
                 <div class="font-left">
                     <span class="txt1">售楼电话</span>
                     <br>
                     <span  class="txt1">400-81811-365转7693</span>
                 </div>
                 <div class="font-right">
                     <div class="phone">
                        <span class="fa fa-phone red"></span>
                        <br>
                        <span class="txt1">打电话</span>
                     </div>
                     <div>
                         <span class="fa fa-hand-o-left shou"></span>
                     </div>
                 </div>
             </div>

             <!--楼盘推荐-->
            <div class="tuijian">
                <div class="tuijian-inner">楼盘推荐</div>
                 <div class="loupantuijain">
                    <div v-for="h in houselist" @click="refsh">
                        <router-link :to="'/houseinfo/'+h._id">
                            <div class="housemenu">
                                <div><img :src="h.img" class="pic"></div>
                                <div class="msg1">
                                    <p class="text2">{{h.price}}</p>
                                    <p class="text">{{h.title}}</p>
                                    <p  class="text1">{{h.jieshao}}</p>
                                </div>
                            </div>
                        </router-link>
                    </div>
                </div>
            </div>
             <Divider class="dd">365淘房APP</Divider>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
import {Swiper,Divider} from 'vux';
import Mappic from '../components/Mappic.vue'
    export default{
        components:{
            Swiper,
            Mappic,
            Divider
        },
        data:function(){
            return {
                housepic:[],
                name:"",
                jieshao:"",
                price:"",
                address:"",
                mianji:"",
                shuifei:"",
                houselist:[],
                aa:"",
                show:true,
                bb:"",
                cc:"",
                dd:"",
                type:""
            }
        },
        computed:{
            houseid:function(){
                return this.$route.params.id;
            }
        },
        activated:function(){
            this.isshoucang();
            
        },
        methods:{
            back:function(){
                history.back();
            },
            // 点击收藏
            shoucang:function(){
                // 点击收藏之前是否登录
                this.http.post("/user/islogin")
                .then(res=>{
                    console.dir(res);
                    this.aa = res.data.msg;
                    if(res.data.err==1){
                        this.show  =true;
                        this.$vux.alert.show({
                            title:this.aa,
                            onHide(){
                                location.href="/#/login"
                            }
                        })
                    }else{
                        this.bb = res.data.userInfo._id;
                        // 点击收藏
                        this.http.get("/house/shoucang",{params:{id:this.houseid,userid:this.bb}})
                        .then(res=>{
                            // console.dir(res);
                            // 收藏成功
                            if(res.data.err==0){
                                this.show =false;
                            }
                            this.aa = res.data.msg;
                            this.$vux.alert.show({
                                title:this.aa
                            })
                        })
                    }
                })
            },
            refsh:function(){
                location.reload();
            },
            // 取消收藏
            cannelsc:function(){
                this.http.post("/user/islogin")
                .then(res=>{
                    // console.dir(res);
                    if(res.data.err==0){
                        var userid = res.data.userInfo._id;
                       this.http.post("/house/delsc",{id:this.houseid,userid:userid})
                        .then(res=>{
                            if(res.data.err==0){
                                this.show=true;
                                this.dd = res.data.msg
                                this.$vux.alert.show({
                                    title:this.dd,
                                })
                            }
                        }) 
                    }
                })
                
            },
            request:function(){
                this.http.post("/house/houseinfo",{id:this.houseid})
                .then(res=>{
                    console.dir(res);
                    this.type = res.data.data.type
                    this.housepic = res.data.data.houseinfo;
                    this.name=res.data.data.title;
                    this.jieshao = res.data.data.jieshao;
                    this.price = res.data.data.price;
                    this.address = res.data.data.address;
                    this.mianji = res.data.data.housemsg[0].mianji;
                    this.shuifei = res.data.data.housemsg[0].shuifei;
                    // 楼盘推荐
                    this.http.get("/house",{
                        params:{type:this.type}
                    })
                    .then(res=>{
                        // console.dir(res.data.data);
                        this.houselist = res.data.data;
                    })
                })
            },
            // 判断是否收藏
            isshoucang:function(){
                // 登录过后才可以收藏
            this.http.post("/user/islogin")
                .then(res=>{
                    if(res.data.err==1){
                        this.show = true
                    }else{
                         // 判断是否收藏
                        this.http.post("/house/ismysc",{id:this.houseid})
                        .then(res=>{
                            // console.dir(res);
                            if(res.data.err==0){
                                this.show =false;
                            }else{
                                this.show =true;
                            }
                        })
                    }
                })
            }
        },
        mounted:function(e){
            var info = this.$refs.info;
            info.scrollTop=0;
            this.request();
            this.isshoucang();
        }
    }
</script>
<style scoped>
.dd{
    color: #999999;
}
.main{
    height: 100vh;
    overflow-y: scroll;
}
.tuijian{
    margin-top: 10px;
}
.tuijian-inner{
    padding: 8px;
    border-bottom: 1px  solid #eeeeee;
}
a{
    text-decoration: none;
}
.housemenu{
    display: flex;
    padding: 8px 10px;
    border-bottom: 1px  solid #eeeeee;
}
.housemenu p{
    margin: 0;
}
.msg1{
    margin-left: 10px;
}
.pic{
    width: 100px;
    height: 75px;
}
.text{
    color: #666666;
    font-size: 12px;
}
.text1{
    color: #f50;
    font-size: 12px;
}
.text2{
    font-size: 14px;
}
.loupantuijain{
    /*border: 1px solid black;*/
    height: 300px;
    overflow-y: scroll;
}
.txt1{
    font-size: 12px;
    color: white;
}
.font{
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.6);
    height: 60px;
    padding: 0 8px; 
    position: fixed;
    width: 100%;
    bottom: 0;
}
.shou{
    font-size: 30px;
    margin-top: 12px;
    padding-left: 10px;
    color: white;
     vertical-align: middle;
}
.red{
    background-color: #ff6464;
    display: inline-block;
    text-align: center;
    margin-top: 8px;
    padding: 5px 0;
    font-size: 20px;
    height: 30px;
    width: 30px;
    border-radius: 4px;
    color: white;
}
.font-left{
    margin-top:8px;
}
.font-right{
    width: 30%;
    display: flex;
}
.jydz{
    font-size: 16px;
    padding-left: 8px;
    border-bottom: 1px solid #eeeeee;
    padding:10px 8px;
}
.zbjsm{
    font-size: 12px;
    text-indent: 2em;
    line-height: 30px;
    border-bottom: 1px solid #eeeeee;
}
.zbjsm div{
    padding: 0 5px;
    color:#8F8F8F;
}
.map{
    width: 100%;
    margin-top: 8px;
}
.money{
    color:#FF7500;
    font-size: 20px;
}
.mianji{
    color:#FF7500;
}
.top{
    background-color: #FF7500;
    height: 34px;
    line-height: 34px;
    color: white;
}
.top img{
    width: 53px;
    height: 17px;
}
.name{
    display: inline-block;
    width: 70%;
    text-align: center;
}
.msg{
    height: 64px;
    background-color: #EEEEEE;
    padding: 8px;
}
.housemsg{
    /*border: 1px solid black;*/
    padding: 8px;
    border-top: 1px solid  #eeeeee;
    border-bottom: 1px solid  #eeeeee;
    background-color: white;
}
.houseinfo-inner{
    font-size: 20px;
    color: #999999;
}
.txt{
    font-size: 12px;
    color: #666666;
}
</style>